<div class="container-fluid">

  <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
    <div class="col-md-5 p-lg-5 mx-auto my-5">
      <h1 class="display-4 font-weight-normal">Ultra High Fidelity</h1>
      <p class="lead font-weight-normal">Powered by the Zipline live-trading engine. This
      event-driven system provides the most realistic simulation ever for your trading algorithms.</p>
      <a class="btn btn-outline-secondary" [routerLink]="['/algorithms']">Learn More</a>
    </div>
    <div class="product-device box-shadow d-none d-md-block"></div>
    <div class="product-device product-device-2 box-shadow d-none d-md-block"></div>
  </div>

  <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
    <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
      <div class="my-3 p-3">
        <h2 class="display-5">Down to the Minute</h2>
        <p class="lead">Years of minute data for over 1,000 US Equities are available in your playground.
        Put your ideas to the test through storm and snow, wind and rain. How will you overcome?</p>
      </div>
      <div class="bg-dark mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
    </div>
    <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
      <div class="my-3 py-3">
        <h2 class="display-5">Explore What's Out There</h2>
        <p class="lead">We've collected and compiled many algorithms for you to explore. With just a click you can test
          beginner's strategies to advanced Machine Learning classifiers. Investigate what works best and why.
          Batteries are all included.
        </p>
      </div>
      <div class="bg-light mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
    </div>
  </div>

  <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
    <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
      <div class="my-3 p-3">
        <h2 class="display-5">Visualize the Future</h2>
        <p class="lead">Raise the bar with beautiful charts. Derive sharp insights on correlation, trends, and performance.
        Compare your results to the benchmark's performance. Learn how to maximize your alpha.</p>
      </div>
      <div class="bg-light mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
    </div>
    <div class="mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden" style="background-color: #c50000">
      <div class="my-3 py-3">
        <h2 class="display-5">Be Inspired to Create</h2>
        <p class="lead">Develop custom algorithms of your own. Using the Lambda Driver system, you can decide what
          your algorithm does on the fly. No coding involved.</p>
      </div>
      <div class="bg-light mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
    </div>
  </div>

  <hr class="featurette-divider">

  <div class="row featurette">
    <div class="col-md-7">
      <h2 class="featurette-heading">The Naive Class. <span class="text-muted">Simple yet effective.</span></h2>
      <p class="lead">You choose the stocks and you choose the strategy to use. We handle the rest of the
      dirty work. There's nothing so easy yet so powerful than this.</p>
    </div>
    <div class="col-md-5">
      <img class="featurette-image featurette-img-size img-fluid mx-auto" src="../../assets/background-images/finance-background-1648042.jpg" alt="Generic placeholder image">
    </div>
  </div>

  <hr class="featurette-divider">

  <div class="row featurette">
    <div class="col-md-7 order-md-2">
      <h2 class="featurette-heading">The Advanced Class.  <span class="text-muted">The entire market in your hands.</span></h2>
      <p class="lead">Don't worry about which stocks to choose. Tell us what you're looking for and we'll do the picking for you.
      The Advanced Class will actively search the entire market for the best combination of stocks to hold in your portfolio.</p>
    </div>
    <div class="col-md-5 order-md-1">
      <img class="featurette-image featurette-img-size img-fluid mx-auto" src="../../assets/background-images/sc-page-logo-neuralnetwork-pagethumb.jpg" alt="Generic placeholder image">
    </div>
  </div>

  <hr class="featurette-divider">

  <div class="row featurette">
    <div class="col-md-7">
      <h2 class="featurette-heading">The ML Class. <span class="text-muted">Leveraging innovation.</span></h2>
      <p class="lead">
        This special group of algorithms use the most advanced Machine Learning Classifiers to derive insights and
        predictions far beyond the level of other algorithms. See it for yourself.</p>
    </div>
    <div class="col-md-5">
      <img class="featurette-image featurette-img-size img-fluid mx-auto" src="../../assets/background-images/red_geometry_abstract_background_6819703.jpg" alt="Generic placeholder image">
    </div>
  </div>


</div>
